<template>
    <!-- 轮播 -->
    <Carousel :list="carouselList"></Carousel>
    <!-- nav -->
    <div class="nav">
        <div class="nav-item" v-for="item in navList" :key="item.order" @click="toPage(item)">
            <img ref="imghight" class="nav-img" :src="item.img" alt="">
            <div class="nav-title">{{ item.name }}</div>
        </div>
    </div>

    <div class="hotRecommend">
        <!-- 热门推荐 -->
        <h3>热门推荐</h3>
        <RecommendCard :list="HotList"></RecommendCard>
        <!-- 猜你喜欢 -->
        <h3>猜你喜欢</h3>
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <CardList :list="likeList"></CardList>
        </van-list>
    </div>
</template>


<script setup lang="ts">
import { onMounted, ref } from 'vue'
import RecommendCard from '@/components/Recommend-card/index.vue'
import CardList from '@/components/card-list/index.vue'
// import NavUp from '../../components/nav-title/index.vue'
import Carousel from '../../components/carousel/index.vue';
import { getCarousel, HotRecommend, likeListData } from '../../api/index.ts'
import type { tomatoesMdoel, focusImageModel, navMdoel, albumsModel } from '../../api/index.ts'
import router from '@/router'
const HotList = ref<albumsModel[]>([])//热门推荐数据
const likeList = ref<albumsModel[]>([])//猜你喜欢数据
const page = ref(1)
const limit = ref(10)
const total = ref()

const loading = ref(false);
const finished = ref(false);

const onLoad = () => {
    loading.value = false
    if (loading.value = true) {
        page.value + 1 && getlikeList()
    }

};

//获取热门推荐数据
const getHotList = async () => {
    try {
        let result = await HotRecommend()
        HotList.value = result.data.albums

    } catch (error) {
        console.error('请求失败');

    }
}
//获取猜你喜欢数据
const getlikeList = async () => {
    try {
        let result = await likeListData(page.value, limit.value)
        total.value = result.data.total
        if (likeList.value.length == total.value) {
            loading.value = true
            return
        } else {
            loading.value = false
            finished.value = false
        }
        likeList.value = likeList.value.concat(result.data.albums)


    } catch (error) {
        console.error(error);
    }
}
//前往分类，排行，听单页面
const toPage = (item) => {
    if (item.order == 1) {
        router.push('/rank')
    } else if (item.order == 2) {
        router.push('/classify')
    } else {
        router.push('/listenlist')
    }
}



//顶部导航数据
// const upNavLIst = ref<navMdoel[]>([])

//轮播图数据
const carouselList = ref<focusImageModel[]>([])

//分类导航数据
const navList = ref<tomatoesMdoel[]>([])
//获取推荐数据
const getCarouselList = async () => {
    try {
        let result = await getCarousel()
        carouselList.value = result.data.moduleContent.focusImages
        navList.value = result.data.moduleContent.tomatoes
        // upNavLIst.value = result.data.moduleContent.moduleRankDatas

    } catch (error) {
        console.error(error);
    }
}

onMounted(() => {
    getHotList()
    getlikeList()
    getCarouselList()

    getCarouselList()
})
</script>

<style lang="less" scoped>
.hotRecommend {

    h3 {
        margin-left: 10px;
        color: #40404c;
    }
}

.up-nav {
    margin-bottom: 10px;
}

.nav {
    width: 100%;
    display: flex;

    .nav-item {
        margin-top: 20px;
        width: 33.3%;
        display: flex;
        flex-direction: column;
        align-items: center;

        .nav-img {
            width: 35px;
            height: 35px;
        }

        .nav-title {
            margin-top: 5px;
            font-size: 12px;
        }
    }
}
</style>